/* * @Author: zhouc * @Date: 2024-04-19 09:57:26 * @Function: 导出页面 * @Last
Modified by: zhouc * @Last Modified time: 2024-05-10 16:37:07 */
<template>
  <div class="export-detail-container">
    <van-notice-bar color="#1989fa" background="#ecf9ff">
      导出链接，有效期十天，请及时复制到浏览器进行下载哦。
    </van-notice-bar>
    <div v-if="rec.type !== 'success'">
      <div class="repair-item" @click="() => handleTimeClick('startTime')">
        <div class="desc">
          <span class="word">开始时间</span>
          <span class="tip">*</span>
        </div>
        <div class="right">
          <span v-if="!rec.startTime">请选择评价开始时间</span>
          <span v-else style="color: #303233">{{ rec.startTime }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="repair-item" @click="() => handleTimeClick('endTime')">
        <div class="desc">
          <span class="word">结束时间</span>
          <span class="tip">*</span>
        </div>
        <div class="right">
          <span v-if="!rec.endTime">请选择评价结束时间</span>
          <span v-else style="color: #303233">{{ rec.endTime }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="btn">
        <van-button type="primary" block @click="handleExport">导出</van-button>
      </div>
    </div>

    <div v-else>
      <div class="success-box" v-if="rec.url">
        <img :src="require('@/assets/img/success.png')" alt="" />
        <div class="title">生成完成</div>
        <div class="sub-title">
          {{ dayjs(rec.startTime).format("YYYY年MM月DD日") }}-{{
            dayjs(rec.endTime).format("YYYY年MM月DD日")
          }}的评价明细
        </div>
        <div class="url" id="copy">
          {{ rec.url }}
        </div>
        <span
          class="copy-btn"
          :data-clipboard-text="rec.url"
          @click="copyUrl(rec.url)"
        >
          复制链接
        </span>
      </div>
      <div class="success-box" v-else>
        <img :src="require('@/assets/img/tip_icon.png')" alt="" />
        <div class="title">暂无数据</div>
      </div>
    </div>

    <div class="loding-mask" v-if="rec.isLoading">
      <div class="loading-box">
        <van-loading size="22px" color="#fff">评价明细导出中...</van-loading>
      </div>
    </div>

    <van-datetime-picker
      v-if="rec.showTimePicker"
      v-model="rec.currentDate"
      type="datetime"
      title="选择完整时间"
      :formatter="formatter"
      @cancel="rec.showTimePicker = false"
      @confirm="handleTimeConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import dayjs from "dayjs";
import { inspectionExport } from "@/service/modules/evaluation";
import { useRoute } from "vue-router";
import { Toast } from "vant";

const route = useRoute();

document.title = "导出明细";

const rec = reactive({
  startTime: "",
  endTime: "",
  type: "",
  isLoading: false,
  currentDate: new Date(),
  showTimePicker: false,
  selectType: "",
  url: "",
});

onMounted(() => {
  rec.startTime = route.query.startTime;
  rec.endTime = route.query.endTime;
});

const handleTimeClick = (selectType) => {
  rec.showTimePicker = !rec.showTimePicker;
  rec.selectType = selectType;
};

const handleTimeConfirm = (value) => {
  rec[rec.selectType] = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
  rec.showTimePicker = false;
};

const handleExport = async () => {
  const begin = new Date(rec.startTime).getTime();
  const end = new Date(rec.endTime).getTime();
  if (begin > end) {
    Toast.fail("开始时间不能大于结束时间");
    return;
  }

  rec.isLoading = true;
  rec.showTimePicker = false;

  const res = await inspectionExport({
    grade: route.query.grade,
    classes: route.query.classes,
    gradeId: route.query.gradeId,
    classId: route.query.classesId,
    startTime: rec.startTime,
    endTime: rec.endTime,
    titleName: "班级巡查得分",
    source: 1,
  });

  if (res.code === 0) {
    if (res.data && res.data.url) {
      rec.isLoading = false;
      rec.type = "success";
      rec.url = res.data.url;
    } else {
      Toast.fail("暂无数据可以导出");
      rec.isLoading = false;
    }
  }
};

// 复制链接
const copyUrl = (url: string) => {
  const textArea = document.createElement("textArea");
  textArea.value = url;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand("copy");
  document.body.removeChild(textArea);

  Toast.success("复制成功");
};

const formatter = (type, val) => {
  if (type === "month") {
    return `${val}月`;
  }
  if (type === "day") {
    return `${val}日`;
  }
  return val;
};
</script>

<style lang="less" scoped>
.export-detail-container {
  width: 100%;

  .top-tip {
    padding: 16px;
    background: #eff4fe;
    color: #3e77fa;
    font-size: 12px;
  }

  .repair-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    padding: 0 16px;
    .tip {
      color: red;
    }

    .desc {
      display: flex;
      align-items: center;
    }

    .word {
      font-size: 14px;
      line-height: 50px;
      color: #303233;
    }

    .right {
      font-size: 14px;
      line-height: 40px;
      color: #c5c5c5;
      span {
        margin-right: 8.75px;
      }
    }
  }

  .btn {
    padding: 0 16px;
    margin-top: 32px;
    height: 40px;

    button {
      background: #3e77fa;
      border-radius: 20px;
      height: 40px;

      .van-button__text {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: #fff;
      }
    }
  }

  .success-box {
    padding: 32px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      color: #000;
      padding: 16px 0 24px 0;
      border-bottom: 1px solid #e1e5ea;
      width: 100%;
      text-align: center;
    }

    .sub-title {
      margin: 12.5px 0 8px 0;
      color: #919599;
      font-size: 12px;
      line-height: 18px;
    }

    .url {
      color: #3e77fa;
      line-height: 18px;
      font-size: 12px;
      text-align: center;
      max-width: 295px;
      word-wrap: break-word;
    }

    .copy-btn {
      display: block;
      width: 160px;
      height: 40px;
      background: #3e77fa;
      border-radius: 20px;
      margin-top: 24px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
    }
  }

  .loding-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;

    .loading-box {
      width: 184px;
      height: 40px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  /deep/ .van-datetime-picker {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    z-index: 9999;
  }
}
</style>
